<template>
  <div id="dahezi">
    <div class="container mt-4">
      <div class="mb-3 row">
        <h2>人员管理</h2>
      </div>
      <div class="mb-3 row">
        <div class="col-sm-2" style="width: 15%">
          <label for="name" class="col-form-label">姓名:</label>
        </div>
        <div class="col-sm-2" style="width: 15%">
          <input type="text" class="form-control" id="name" v-model="newPerson.name" />
        </div>
        <div class="col-sm-2" style="width: 15%">
          <label for="age" class="col-form-label">年龄:</label>
        </div>
        <div class="col-sm-2" style="width: 15%">
          <input type="text" class="form-control" id="age" v-model="newPerson.age" />
        </div>
        <div class="col-sm-2" style="width: 15%">
          <label for="sex" class="col-form-label">性别:</label>
        </div>
        <div class="col-sm-2" style="width: 15%">
          <select class="form-select" id="sex" v-model="newPerson.sex">
            <option value="Male">男</option>
            <option value="Female">女</option>
          </select>
        </div>
        <div class="col-sm-2" style="width: 10%">
          <button type="button" class="btn btn-primary" v-on:click="addPerson()">
            添加
          </button>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <table class="table table-bordered border-primary">
            <thead>
              <tr class="table-primary">
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in people" v-bind:key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.sex }}</td>
                <td>
                  <button class="btn btn-danger" v-on:click="deletePerson(index)">
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-sm-2" style="width: 25%">
          <input
            type="text"
            class="form-control"
            v-model="searchName"
            placeholder="搜索姓名"
          />
        </div>
        <div class="col-sm-2" style="width: 10%">
          <button type="button" class="btn btn-primary" v-on:click="searchPeople1()">
            搜索
          </button>
        </div>
        <div class="col-sm-2" style="width: 10%">
          <button type="button" class="btn btn-primary" v-on:click="cancelSearch()">
            取消搜索
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const data = reactive({
      newPerson: {
        name: "",
        age: 0,
        sex: "Male",
      },
      people: [
        {
          name: "李刚",
          age: 30,
          sex: "Male",
        },
        {
          name: "玛丽",
          age: 26,
          sex: "Male",
        },
        {
          name: "王琦",
          age: 22,
          sex: "Female",
        },
        {
          name: "林黛玉",
          age: 36,
          sex: "Male",
        },
      ],
      searchName: "",
      searchPeople: [],
      oldPeople: [],
      addPerson: () => {
        data.people.push(data.newPerson);
        data.newPerson = { name: "", age: 0, sex: "Male" };
      },
      deletePerson: (index) => {
        data.people.splice(index, 1);
      },
      searchPeople1: () => {
        data.searchPeople = data.people.filter((item) => {
          const index = item.name.indexOf(data.searchName);
          if (index >= 0) {
            return true;
          } else {
            return false;
          }
        });
        data.oldPeople = data.people;
        data.people = data.searchPeople;
      },
      cancelSearch: () => {
        data.people = data.oldPeople;
      },
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style scoped>
#dahezi {
  margin: 0 auto;
  width: 1200px;
  padding: 10px;
  border: 2px solid #a0cfff;
  border-radius: 10px; 
}
</style>
